<template>
  <view class="page">
    <view style="padding-top:260rpx;">
      <view style="height:80px;">
        <view class="login-input flex align-end" :class="{active:distinguish==true}">
          <view class="cuIcon-people text-white text-xl margin-bottom-sm"></view>
          <input type="text" placeholder="请输入当前账号" v-model="From.UserName" placeholder-style="color:#fff"/>
          <view v-if="From.UserName" class="cuIcon-roundclose text-white text-xl margin-bottom-sm" @tap="From.UserName = null"></view>
        </view>
        <text class="tips" v-show="distinguish">{{ UserNametips }}</text>
      </view>

      <view style="height:80px;">
        <view class="login-input flex align-end" :class="{active:distinguish==true}">
          <view class="cuIcon-lock text-white text-xl margin-bottom-sm"></view>
          <input type="password" placeholder="请输入当前密码" v-model="From.PassWord" placeholder-style="color:#fff"
                 v-if="SwiTch"/>
          <input type="text" placeholder="请输入当前密码" placeholder-style="color:#fff" v-model="From.PassWord" v-else/>
          <view v-if="From.PassWord" class="cuIcon-roundclose text-white text-xl margin-bottom-sm margin-right" @tap="From.PassWord = null"></view>
          <view class="cuIcon-attention text-white text-xl margin-bottom-sm" @tap="Switch()"></view>
        </view>
        <text class="tips" v-show="distinguish">{{ PassWordtips }}</text>
      </view>
    </view>
    <view class="login-button">
      <text class="text-white"><radio :checked="checked" @click="clickchecked" style="transform:scale(0.7)"></radio>记住密码</text>
      <text class="register" @click="Jump">暂无账号点击注册</text>
      <button @click="login">点击登录</button>
    </view>
  </view>
</template>

<script>
/* 本图标全部使用阿里图标,图标目录static yx-login */
export default {
  data () {
    return {
      From: {
        UserName: '', // 账号
        PassWord: '' // 密码
      },
      checked: false, // 单选框
      distinguish: false,
      UserNametips: '',
      PassWordtips: '',
      SwiTch: true
    }
  },
  // 读取本地存储密码及账号
  onShow () {
    uni.getStorage({
      key: 'UserInfo',
      success: e => {
        this.From.UserName = e.data.UserName
        this.From.PassWord = e.data.PassWord
      }
    })
  },
  methods: {
    login () {
      const that = this;
      that.distinguish = false
      if (that.From.UserName && that.From.PassWord) {
        if (that.From.UserName === 'admin' && that.From.PassWord === 'admin') {
          uni.reLaunch({
            url: '/pages/index/home'
          })
        } else {
          that.UserNametips = '账号错误请重新填写'
          that.PassWordtips = '密码错误请重新填写'
          that.distinguish = true
        }
      } else {
        that.UserNametips = '账号不能为空'
        that.PassWordtips = '密码不能为空'
        that.distinguish = true
      }
    },
    /* 记住密码用户第二次进入页面直接填充 */
    clickchecked () {
      var that = this
      this.checked = !this.checked
      if (that.checked === true) {
        if (that.From.UserName && that.From.PassWord) {
          uni.setStorage({
            key: 'UserInfo',
            data: that.From
          })
        }
      }
    },
    Delete () {
      this.From.UserName = ''
    },
    Delete2 () {
      this.From.PassWord = ''
    },
    Jump () {
      uni.reLaunch({
        url: '../register/index'
      })
    },
    Switch () {
      this.SwiTch = !this.SwiTch
    }
  }
}
</script>

<style lang="scss" scoped>
/* 背景图设置 */
.page {
  width: 100%;
  height: 100%;
  background-image: url(../../static/images/design03.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.login-input {
  width: 85%;
  height: 63px;
  margin: 0px auto;
  border-bottom: 1px solid rgb(255, 255, 255);

  input {
    width: 91%;
    border: none;
    height: 40px;
    color: rgb(255, 255, 255);
    padding-left: 15px;
    padding-right: 15px;
    font-size: 14px;
    outline: none;
    -webkit-appearance: none; /*去除系统默认的样式*/
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 点击高亮的颜色*/
  }
}

.login-button {
  width: 85%;
  margin: 0px auto;

  button {
    width: 100%;
    font-size: 15px;
    height: 40px;
    color: rgb(255, 255, 255);
    background-color: rgb(78, 110, 242);
    margin-top: 16px;
  }

  radio {
    font-size: 14px;
    color: rgb(255, 255, 255);
  }

  .register {
    font-size: 12px;
    color: rgb(255, 255, 255);
    float: right;
    padding-top: 10px;
    text-decoration: underline;
  }
}

.active {
  color: rgb(245, 8, 8);
  border-bottom: 1px solid rgb(245, 8, 8);
}

.tips {
  color: rgb(245, 8, 8);
  font-size: 12px;
  display: initial;
  float: right;
  padding-right: 30px;
}

.text-xl {
  font-size: 34rpx !important;
}

.margin-bottom-sm {
  margin-bottom: 24rpx !important;
}
</style>
